<template>
  <div v-if="isShow" class="RuleAndRecord-wrap">
    <tabs v-model="currentTab" title-active-color="#2CA9C8">
      <tab title="规则">
        <div class="content rule-content" v-html="rule"></div>
      </tab>
      <tab title="活动记录">
        <list class="content record-list-wrap">
          <div class="record-list">
            <div class="record" v-for="n in recordList" :key="n.id">
              <p class="record-yanzhi ellipsis">奖励{{n.points}}颜值</p>
              <p class="record-time ellipsis">{{n.dates}}</p>
            </div>
          </div>
          <div v-if="recordList.length < 1" class="record-nodata">
            <p>暂无数据</p>
          </div>
          <div class="record-more-record">
            显示30天内活动记录
          </div>
        </list>
      </tab>
    </tabs>
    <span @click="closeThis" class="iconfont iconclose"></span>
  </div>
</template>
<script>
import { Tab, Tabs, List, Toast } from 'vant'
import {raceList} from '@/api/request'
export default {
  data() {
    return {
      currentTab: 0,
      rule: '',
      recordList: []
    };
  },
  components: {
    Tab, Tabs, List
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    active: {
      type: Number,
      default: 0
    }
  },
  watch: {
    active (val) {
      this.currentTab = val
      this.raceList()
      return val
    }
  },
  mounted () {
    this.raceList()
  },
  methods: {
    closeThis() {
      console.log('close')
      this.currentTab = 0
      this.$emit('closeAlert')
    },
    raceList () {
      raceList({}).then(res => {
        console.log(res)
        this.rule = res.rule
        this.recordList = res.list
      }).catch(e => {
        console.log(e)
        Toast.fail(e.message);
      })
    }
  }
};
</script>
<style lang="less" scoped>

.RuleAndRecord-wrap {
  width: 4.9rem;
  padding: 0 0.45rem 0.4rem;
  border-radius: 0.2rem;
  background: #fff;
  color: #383838;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  .iconclose{
    position: absolute;
    left: 50%;
    bottom: -1.18rem;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #fff;
  }
  .content{
    margin-top: 0.26rem;
  }
  .rule-content{
    color: #383838;
    font-size: 0.26rem;
  }
  /deep/ .van-tabs__line{
    background-color: #2CA9C8;
  }
  /deep/ .van-tabs__content{
    height: 7rem;
    overflow-y: scroll;
  }
  .record-list-wrap{
    .record-list{
      
      .record{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.02rem solid #EEEEEE;
        height: 0.97rem;
        p{
          width: 49%;
        }
        .record-yanzhi{
          font-size: 0.24rem;
          color: #000;
        }
        .record-time{
          font-size: 0.22rem;
          color: #999999;
          text-align: right;
        }
      }
    }
  }
  .record-nodata{
    width: 100%;
    height: 5.9rem;
    background: url(../../assets/images/nodata.png) no-repeat;
    background-size: 1.36rem 0.88rem;
    background-position: center 2rem;
    overflow: hidden;

    p{
      font-size: 0.24rem;
      color: #999999;
      text-align: center;
      margin: 3rem auto 0;
    }
  }
  .record-more-record{
    font-size: 0.24rem;
    text-align: center;
    color: #999999;
    line-height: 1rem;
  }
}
</style>